import React from 'react'
import Mengyaxiong from './mengyaxiong.js'
import Yanchanghui from './yanchanghui'
import Zuixinxianchang from './zuixinxianchang'
import Miaosufiv from './miaosufive'
import Zongyi from './zongyi'
import Life from './life'
import Yinyuejie from './Yinyuejie'

import { Tabs, WhiteSpace } from 'antd-mobile';

class Demo extends React.Component {
  renderContent = tab =>
    (<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '150px', backgroundColor: '#fff' }}>
      <p>Content of {tab.title}</p>
    </div>);

  render() {
    const tabs = [
      { title: '音乐节' },
      { title: '萌芽熊' },
      { title: '演唱会' },
      { title: '最新现场' },
      { title: '秒速5厘米' },
      { title: '综艺' },
      { title: '生活' },
    ];

    return (
      <div>
        <WhiteSpace />
        <Tabs tabs={tabs} renderTabBar={props => <Tabs.DefaultTabBar {...props} page={3} />}>  
          <div>
            <Yinyuejie/>
          </div>   
          <div>
            <Mengyaxiong/>
          </div>
          <div>
            <Yanchanghui/>
          </div>
          <div>
            <Zuixinxianchang/>
          </div>
          <div>
            <Miaosufiv/>
          </div>
          <div>
            <Zongyi/>
          </div>
          <div>
            <Life/>
          </div>
      
          
        </Tabs>
        <WhiteSpace />
      </div>
    );
  }
}

export default Demo